<template>
  <div class="create-meeting">
    <div class="create-meeting-type m-b-20">
      <span class="label-width">选择创建会议的类型：</span>
      <div class="create-meeting-type-cards">
        <el-card @click="toSingleMeeting()" class="box-card c-p">
          <template #header>
            <h2>双人会议</h2>
          </template>
          <div class="introduce">
            <p>双人会议提供更高清的画质，可以使沟通变得更加轻松，更专注于彼此的交流。</p>
            <p>
              提供视频通话、屏幕共享及会议内聊天等功能，适用于远程沟通、咨询、一对一辅导等场景。
            </p>
          </div>
        </el-card>
        <el-card @click="toMultiMeeting()" class="box-card c-p">
          <template #header>
            <h2>多人会议</h2>
          </template>
          <div class="introduce">
            <p>多人会议支持多人同时参与会议，可以促进大规模交流和协作。</p>
            <p>
              提供多人视频通话、多人屏幕共享及多人实时聊天等功能，适用于远程培训、项目沟通、内部会议等场景。
            </p>
          </div>
        </el-card>
        <el-card @click="toIntendedMeeting()" class="box-card c-p">
          <template #header>
            <h2>预定会议</h2>
          </template>
          <div class="introduce">
            <p>预定会议需要填写会议信息，如会议时间、主题等，方便参会者按时参加。</p>
            <p>
              会议支持多人参与，并会在会议列表中展示，方便其他用户提前了解，适用于讲师培训、经验分享、疑问解答等场景。
            </p>
          </div>
        </el-card>
        <!-- <el-button type="primary" @click="toSingleMeeting()" size="large" plain>
          创建双人会议
        </el-button>
        <el-button @click="toMultiMeeting()" type="warning" size="large" plain>
          创建多人会议
        </el-button>
        <el-button type="success" size="large" plain>预定会议</el-button> -->
      </div>
    </div>
    <!-- <div class="create-meeting-enter m-b-20">
      <span class="f-s-0 label-width">请输入会议房间：</span>
      <div>
        <el-input style="display: inline" v-model="meetingNo" placeholder="请输入房间号" />
        <el-button @click="onJoinMeeting" class="m-l-20" type="warning" plain>加入会议</el-button>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, type LocationQueryRaw } from 'vue-router';

const meetingNo = ref<string>('');

const router = useRouter();
const toSingleMeeting = (query?: LocationQueryRaw) => {
  const { href } = router.resolve({
    name: 'singleMeeting',
    query,
  });
  window.open(href, '_blank');
};
const toMultiMeeting = (query?: LocationQueryRaw) => {
  const { href } = router.resolve({
    name: 'multiMeeting',
    query,
  });
  window.open(href, '_blank');
};
const toIntendedMeeting = () => {
  router.push({ name: 'intendedMeeting' });
};
// const onJoinMeeting = () => {
//   // 先判断输入的会议号是否开启了会议或预约了会议
//   toSingleMeeting({
//     meetingNo: meetingNo.value,
//   });
// };
</script>

<style lang="scss" scoped>
.create-meeting {
  background-color: #fff;
  padding: 20px;
  &-type {
    display: flex;
    align-items: center;
    &-cards {
      flex: 1;
      display: flex;
      justify-content: space-around;
      .el-card {
        width: 30%;
      }
    }
  }
  &-enter {
    display: flex;
    align-items: center;
  }
}
.label-width {
  width: 160px;
  text-align: left;
}
</style>
